<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>参数设置</title>
  <link rel="stylesheet" href="css/style.css">
  <!-- Vue 3 & Element Plus -->
  <script src="./public/vue.global.prod.js"></script>
  <!-- 引入 Element Plus -->
  <link rel="stylesheet" href="./public/element-plus-index.css">
  <script src="./public/index.full.js"></script>
  <link rel="stylesheet" href="./public/icon.css" />
  <!-- ECharts -->
  <script src="./public/echarts.min.js"></script>
  <script src="./public/axios.min.js"></script>
  <style>
   

    .breadcrumb {
      font-size: 14px;
      color: #606266;
      margin-bottom: 30px;
    }

    .breadcrumb span {
      color: #409EFF;
      cursor: pointer;
    }

    .tabs {
      margin-bottom: 24px;
    }

    .form-section {
      margin-top: 24px;
    }

    .el-alert {
      margin-bottom: 24px;
    }

    .el-form-item__label {
      font-weight: 500;
    }

    .el-input-number {
      width: 180px;
    }

    .el-button {
      min-width: 60px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="container">
      <div class="breadcrumb">
        <span @click="goHome">首页</span> / 参数设置
      </div>
      <el-tabs v-model="activeTab" class="tabs">
        <el-tab-pane label="授权方式" name="auth"></el-tab-pane>
        <el-tab-pane label="无操作时限" name="timeout"></el-tab-pane>
        <el-tab-pane label="存储" name="storage"></el-tab-pane>
        <el-tab-pane label="安全" name="security"></el-tab-pane>
        <el-tab-pane label="区域设置" name="region"></el-tab-pane>
        <el-tab-pane label="短信通知" name="sms"></el-tab-pane>
        <el-tab-pane label="端口映射" name="port"></el-tab-pane>
        <el-tab-pane label="分配策略" name="strategy"></el-tab-pane>
        <el-tab-pane label="限流配置" name="limit"></el-tab-pane>
        <el-tab-pane label="主题" name="theme"></el-tab-pane>
      </el-tabs>
      <div v-if="activeTab === 'auth'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'timeout'" class="form-section">
        <el-alert title="单位：秒，指定时间内无操作将释放连接，0：表示一直保持连接。" type="error" show-icon :closable="false" />
        <el-form :model="form" label-width="120px">
          <el-form-item label="无操作时限(秒)" required>
            <div style="display: flex; align-items: center;">
              <div
                style="display: flex; align-items: center; border: 1px solid #dcdfe6; border-radius: 4px; overflow: hidden; height: 32px;">
                <el-input-number v-model="form.timeout" :min="0" :step="1" style="width: 120px; border: none;"
                  controls-position="right" />
                <span
                  style="background: #f5f7fa; padding: 0 12px; border-left: 1px solid #dcdfe6; height: 100%; display: flex; align-items: center;">秒</span>
              </div>
              <el-button type="primary" style="margin-left: 12px;" @click="save">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="activeTab === 'storage'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'security'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'region'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'sms'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'port'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
        <div v-if="activeTab === 'strategy'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'limit'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
      <div v-if="activeTab === 'theme'" class="form-section">
        <el-alert title="暂无数据。" type="" show-icon :closable="false" />
      </div>
    </div>
  </div>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup () {
        const activeTab = ref('timeout')
        const form = ref({ timeout: 0 })

        const save = async () => {
          try {
            // 取出当前输入的秒数
            const timeout = form.value.timeout
            console.log(timeout, "timeout")
            // 发起 GET 请求
            const res = await axios.get(`/login/lock/${timeout}`)
            // 假设返回成功就弹窗
            ElementPlus.ElMessage.success('保存成功')
          } catch (e) {
            ElementPlus.ElMessage.error('保存失败')
          }
        }
        const goHome = () => {
          // 跳转首页逻辑
        }
        return { activeTab, form, save, goHome }
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>

</html>